<template>
  <div class="classified-list">
    <NavView />
    <div class="category-container">
      <div
        class="category-view"
        v-for="(item, index) in category"
        :key="index"
        :class="{ 'active': activeCategory === index }"
        @click="selectCategory(index)"
      >
        {{ item.text }}
      </div>
    </div>
    <div class="category-container">
      <div
        class="category-view"
        v-for="(item, index) in region"
        :key="index"
        :class="{ 'active': activeRegion === index }"
        @click="selectRegion(index)"
      >
        {{ item.text }}
      </div>
    </div>
    <div class="category-container">
      <div
        class="category-view"
        v-for="(item, index) in process"
        :key="index"
        :class="{ 'active': activeProcess === index }"
        @click="selectProcess(index)"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NavView from '../components/NavView.vue';

// 分类数据
const category = [
  { text: "题材" },
  { text: "全部" },
  { text: "热血" },
  { text: "古风" },
  { text: "玄幻" },
  { text: "奇幻" },
  { text: "悬疑" },
  { text: "都市" },
  { text: "历史" },
  { text: "武侠仙侠" },
];

const region = [
  { text: "地区" },
  { text: "全部" },
  { text: "大陆" },
  { text: "日本" },
  { text: "韩国" },
  { text: "其他" },
];

const process = [
  { text: "进度" },
  { text: "全部" },
  { text: "连载" },
  { text: "完结" },
];

// 当前选中的索引
const activeCategory = ref(1); // 默认选中"全部"
const activeRegion = ref(1);   // 默认选中"全部"
const activeProcess = ref(1);  // 默认选中"全部"

// 选择分类
const selectCategory = (index) => {
  activeCategory.value = index;
  // 这里可以添加筛选逻辑或触发父组件事件
  console.log('选中分类:', category[index].text);
};

// 选择地区
const selectRegion = (index) => {
  activeRegion.value = index;
  console.log('选中地区:', region[index].text);
};

// 选择进度
const selectProcess = (index) => {
  activeProcess.value = index;
  console.log('选中进度:', process[index].text);
};
</script>

<style scoped lang="scss">
.classified-list {
  .category-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 15px;
  }

  .category-view {
    flex-shrink: 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:first-child {
      background: transparent;
      font-weight: bold;
    }

    &.active {
      background: #1890ff;
      color: white;
    }

    &:hover:not(:first-child) {
      background: #e6e6e6;
    }
  }
}
</style>
